import { WebElement, html } from '../../webelement';

class MyCard extends WebElement {
  render() {
    return html`
      <link rel="stylesheet" href="/public/pc/admin/admin.css">
      <div class="u-card" >
        <div class="u-card-body">
          <div class="u-card-title">【蜕变计划】专属训练营学习 审题</div>
          <div class="ui-flex ui-items-center u-card-sub"
          style="margin-bottom: .3rem">
            <div class="text-color-gray">课时：1103课时</div>
            <div class="text-color-gray u-card-gutter">|</div>
            <div class="text-color-gray" >报班即学</div>
          </div>
          <slot name="content"></slot>
        </div>
        <div class="app-line"></div>
        <div class="u-card-footer"><slot name="footer"></slot></div>
      </div>
    `
  }
}

customElements.define('my-card', MyCard);


// import { component, html, useState, useEffect, useRef } from '../hooks';

// function MyCard({a}) {
//   let [count, setCount] = useState(0);
//   const myRef = useRef(0);

//   useEffect(() => {
//     // console.log('useEffect', count)
//   });

//   function parse() {
//     return count + "-" + a
//   }

//   myRef.current = a

//   return html`
//      <link rel="stylesheet" href="/public/pc/admin/admin.css">
//      <div class="u-card" @click="${() => setCount(count - 1)}">
//        <div class="u-card-body">
//          <div class="u-card-title">【蜕变计划】专属训练营学习 审题 ${myRef.current} ${parse()}</div>
//          <div class="ui-flex ui-items-center u-card-sub"
//          style="margin-bottom: .3rem">
//            <div class="text-color-gray">课时：1103课时</div>
//            <div class="text-color-gray u-card-gutter">|</div>
//            <div class="text-color-gray" >报班即学</div>
//          </div>
//          <slot name="content"></slot>
//        </div>
//        <div class="app-line"></div>
//        <div class="u-card-footer"><slot name="footer"></slot></div>
//      </div>
//   `;
// }

// MyCard.observedAttributes = ['a'];


// customElements.define('my-card', component(MyCard));